<template>
  <el-card class="storagge-card">
    <el-row class="row-info">
      <el-col :span="12">
        #{{ value.index }}
      </el-col>
      <el-col :span="12">
        <el-button type="primary" size="mini" :disabled="!device.online || value.opened" @click="handleOpen">
          {{ $t('Open') }}</el-button>
      </el-col>
    </el-row>
    <el-row class="row-info">
      <!-- <el-col :span="12">
        <span>{{ openStatus }}</span>
      </el-col> -->
      <!-- <el-col :span="12"> -->
      <span v-if="value.permissionvv !== undefined && value.permission !== null">
        <el-button type="text" @click="handleCard(card)">
          {{ card.name }}
        </el-button>
      </span>
      <span>{{ useStatus }}</span>
      <!-- </el-col> -->
      <!-- <el-col v-if="device.mode == 3" :span="18" style="text-align:right;">
        <el-select v-model="value.mode" style="width:80px;" size="mini" @change="handleChangeMode">
          <el-option v-for="(mode,index) in modes" :key="'door_mode_'+index" :label="mode" :value="index" />
        </el-select>
      </el-col> -->
    </el-row>
    <!-- <el-row class="row-info" v-if="(device.mode === 3 && value.mode === 1) || device.mode === 1">
      <el-col :span="8">
        <span>{{value.user}}</span>
      </el-col>
      <el-col :span="16" style="text-align:right;">
        <el-button size="mini" @click="handleChangeUser">
          {{ value.user ? $t('device.ChangeUser') : $t('device.SelectUser') }}
        </el-button>
      </el-col>
    </el-row> -->
  </el-card>
</template>

<script>
  import deviceAPI from '@/api/device/device.js'
  import deviceCardAPI from '@/api/device/card.js'

  export default {
    name: 'LockerStorageCard',
    props: {
      device: {
        type: Object,
        required: true
      },
      value: {
        type: Object,
        default () {
          return {}
        }
      }
    },
    data() {
      return {
        modes: [this.$t('Public'), this.$t('User'), this.$t('Anyone')],
        card: {}
      }
    },
    computed: {
      openStatus() {
        const {
          value
        } = this
        return value.opened ? this.$t('Opened') : this.$t('Closed')
      },
      useStatus() {
        const {
          value
        } = this
        return (value.permission !== undefined && value.permission !== null) ? this.$t('device.InUse') : this.$t(
          'device.Free')
      }
    },
    watch: {
      value(nv, ov) {
        if (nv === null || nv.key === undefined || nv.key === ov.key) {
          return
        }
        this.loadCard()
      }
    },
    created() {
      this.loadCard()
    },
    methods: {
      loadCard() {
        const {
          key
        } = this.value
        if (key === undefined || key === null) {
          this.card = {}
          return
        }
        const vm = this
        deviceCardAPI.list({
          code: key
        }).then(res => {
          if (res.data.length === 0) {
            return
          }
          vm.card = Object.assign({}, res.data[0])
        })
      },
      doOpen() {
        const {
          value
        } = this
        deviceAPI.command({
          code: this.device.code,
          command: 'open',
          content: value.index,
          action: this.$t('Open')
        })
        // .then(data => {
        //   value.opened = true
        // })
      },
      handleOpen() {
        if (this.value.opened) {
          return;
        }
        this.$confirm(this.$t('locker.OpenPrompt')).then(this.doOpen)
        // },
        // handleChangeMode() {
        //   const value = this
        //   deviceChildAPI.update(value).then(() => {
        //     if (value.mode === 1) {
        //       setTimeout(handleChangeUser, 100)
        //       return;
        //     }
        //     const {
        //       deviceId,
        //       index,
        //       key
        //     } = value
        //     deviceCardAPI.deleteOne({
        //       deviceId,
        //       childIndex: index,
        //       key
        //     }).then(() => {
        //       value.user = null
        //       value.key = null
        //     })
        //   })
      }
    }
  }

</script>

<style>
  .row-info {
    padding: 3px 0;
  }

</style>
